<template>
    <div v-if="showToolTip">
        <n-tooltip :placement="placement" trigger="hover">
            <template #trigger>
                <div class="flex-center h-full curson-pointer padding-x-12px" :class="contentClass">
                    <slot></slot>
                </div>
                {{ tooltipContent }}
            </template>
        </n-tooltip>
    </div>
    <div v-else class="flex-center cursor-pointer" :class="contentClass">
        <slot></slot>
    </div>
</template>

<script setup lang='ts'>
import { computed } from 'vue';
import { NTooltip } from 'naive-ui';
import { FollowerPlacement } from 'vueuc';

interface Props {
    /** tooltip显示的文本 */
    tooltipContent?: string
    /** tooltip的位置 */
    placement?: FollowerPlacement
    /** class样式名称 */
    contentClass?: string
}

const props = withDefaults(defineProps<Props>(), {
    tooltipContent: '',
    placement: 'bottom',
    contentClass: '',
})

const showToolTip = computed(() => Boolean(props.tooltipContent))
</script>

<style scoped>
</style>